<template>
    <codemirror v-model="content" :options="cmOptions" />
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/idea.css'
import 'codemirror/theme/duotone-light.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/sql/sql.js'

export default {
    components: { codemirror },
    props: {
        readOnly: {
            type: Boolean,
            default: true
        },
        mode: {
            type: String,
            default: 'text/javascript'
        },
        value: {
            type: String,
            required: true
        },
        theme: {
            type: String,
            default: 'idea'
        },
        lineNumbers: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            content: this.value,
            cmOptions: {
                tabSize: 2,
                mode: this.mode,
                theme: this.theme,
                lineNumbers: this.lineNumbers,
                readOnly: this.readOnly
            }
        }
    },
    watch: {
        value: {
            handler: function(newVal) {
                this.content = newVal
            }
        },
        content: function(newVal) {
            this.$emit('input', newVal)
        }
    }
}
</script>
